<template>
	<view>
		<navigationbar :title="title"></navigationbar>
		<view class="container">
			<view class="list">
				<view class="item" v-for="(item,index) in dataList" :key="index" @click="postDetail1(item)">
					<text>{{item.name}}</text>
				</view>
				<view v-if="boxSwitch" class="clearfix">
				</view>
			</view>
		</view>
		<view class="selPost" v-if="boxSwitch">
			<view class="select">
				<text>已选</text>
			</view>
			<view class="card">
				<view class="item" v-for="(item,index) in selData" :key="index">
					<text>{{item.name}}</text>
					<text class="delete" @click="delSelPost(item.name)"> x </text>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btnLeft">
				<u-button class="btnUploadFile" size="normal" text="清除" :color="buttonBgColor1" @click="clearInfo"></u-button>
			</view>
			<view class="btnRight">
				<u-button class="btnUploadFile" size="normal" text="保存" :color="buttonBgColor2" @click="saveInfo"></u-button>
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="right" :safeAreaInsetTop="true">
		    <view class="soltContainer">
				<view class="listItem" v-for="(item,index) in subLevelModelList" :key="index">
					<text @click="postDetail2(item)">{{item.name}}</text>
				</view>
				<view class="clearfix"></view>
				<view v-if="boxSwitch" class="clearfix"></view>
		    </view>
		</u-popup>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import navigationbar from '../../navigationBar.vue';
export default {
	components: {
		navigationbar
	},
	data() {
		return {
			title: '职位类型',
			dataList: '',
			subLevelModelList: '',
			selData: [],
			boxSwitch: false,
			show: false,
			buttonBgColor1: '#d6d6d6',
			buttonBgColor2: '#7aaffe',
		};
	},
	onShow() {
		uniCloud.callFunction({
			name: 'getIntentionList',
			success: (res) => {
				this.dataList = res.result.data
			}
		});
		console.log(this.$store.state.intentionKey)
		if(this.$store.state.intentionKey){
			console.log(this.$store.state.intentionKey)
			uniCloud.callFunction({
				name:'getCollection',
				data:{
					userID: this.$store.state.userID
				},
				success:(res) => {
					this.selData = res.result.data.select_industry
				}
			})
		}
	},
	watch:{
		selData (data) {
			if(!data.length){
				this.boxSwitch = false
			}else{
				this.boxSwitch = true
			}
		}
	},
	methods: {
		// 一级职位分类点击事件
		postDetail1(data) {
			this.show = true
			this.subLevelModelList = data.subLevelModelList
		},
		// 二级职位分类点击事件
		postDetail2(data) {
			let {code,name} = data
			let index = this.selData.findIndex(item => {
				return item.name === name
			})
			if(index === -1){
				this.selData.push({code,name})
			}else{
				this.selData.splice(index,1)
			}
		},
		close() {
			this.show = false
		},
		open() {
			
		},
		clearInfo() {
			this.selData = []
		},
		saveInfo() {
			console.log(this.selData)
			if(this.$store.state.intentionKey){
				uniCloud.callFunction({
					name: 'setIndustry',
					data: {
						data: this.selData,
						id: this.$store.state.userID
					},
					success:(res) => {
						this.show = false
						this.$refs.uToast.show({
							message: '保存成功',
							icon: 'https://cdn.uviewui.com/uview/demo/toast/success.png',
							type: 'success'
						});
						this.$store.commit('setSwitch', true)
					}
				})
			}else{
				if(this.selData.length > 1){
					this.$refs.uToast.show({
						message: '只能选择一个职位分类！',
						icon: 'https://cdn.uviewui.com/uview/demo/toast/error.png',
						type: 'error'
					});
					return
				}
				this.$store.commit('setPublishCode', this.selData[0])
				uni.navigateBack({
					delta: 1
				})
			}
		},
		delSelPost(data) {
			this.selData.forEach((item,index,arr) => {
				if(item.name === data){
					arr.splice(index,1)
				}
			})
			
		}
	}
};
</script>

<style lang="scss">
	.container{
		width: 100%;
		margin-bottom: 160rpx;
		.list {
			width: 90%;
			margin: 0 auto;
			.item {
				padding: 40rpx 0;
				border-bottom: 1rpx solid #dddddd;
			}
		}
	}
	.selPost {
		background-color: white;
		width: 100%;
		padding: 25rpx 0;
		position: fixed;
		bottom: 145rpx;
		display: flex;
		flex-flow: row;
		align-items: center;
		z-index: 9999999;
		.select {
			margin: 0 35rpx;
			width: 80rpx;
		}
		.card {
			width: 100%;
			// height: 70rpx;
			overflow-x: auto;
			display: flex;
			flex-flow: row;
			.item {
				width: auto;
				color: #909090;
				position: relative;
				background-color: #c7e5ff;
				border-radius: 10rpx;
				margin-right: 30rpx;
				& text:nth-of-type(1) {
					display: inline-block;
					margin: 10rpx 25rpx;
				}
				& text:nth-of-type(2) {
					position: absolute;
					top: -10rpx;
					right: 5rpx;
				}
			}
		}
	}
	.footer {
		width: 100%;
		margin: 0 auto;
		position: fixed;
		background-color: white;
		z-index: 9999999;
		bottom: 0;
		display: flex;
		flex-flow: row;
		justify-content: space-around;
		.btnLeft {
			width: 30%;
			margin: 35rpx 0 ;
		}
		.btnRight {
			width: 50%;
			margin: 35rpx 0 ;
		}
	}
	.u-popup{
		text-align: center;
		text{
			display: block;
			padding: 30rpx 120rpx;
		}
	} 
	.soltContainer {
		margin-top: 48px;
		height:70%;
		overflow: auto;
	}
	.clearfix {
		height: 160rpx;
	}
	.u-toast{
		
		z-index: 999999999999;
	}
</style>
